<template>
  <div class="content" :class="{tophide : arrowShow}">
    <div class="content_left" @click.stop="cententLeftFn">
      <div
        class="name_tip"
        v-if="files.current"
        :class="{yc : tipYc}"
        @mouseover="tipYc = false"
        @mouseleave="tipYc = true"
      >{{files.current.name}}</div>
      <div class="content_left_top" id="drawing"></div>

      <BottomControl
        :zoomVal="vm.zoom"
        :rotateDeg="vm.rotateDeg"
        :modifyRate="pageModifyRate ? singleModifyRate : averageModifyRate"
        :checkboxsGroup="checkboxsGroup"
        :hasChangeHistory="history.show || history.showVersionInfo"
        @showTextContent="showTextContent"
        @setImgRotate="setImgRotate"
      />
      <!-- 快捷编辑框 -->
      <!-- <transition name="zoomIn">
                <div class="self_popup_wrapper" id="self_popup_wrapper" 
                v-show="poppupShow && vm.currentDrawData.region != 'polyline'" @click.stop @mousedown="popupDrag">
                    <div class="self_popup_in">
                        <textarea class="self_popup_textarea" style="max-height: 300px" 
                        v-model="vm.currentDrawData.text" @mousedown.stop @mouseup="textareaMouseUpFn($event)"
                         @mousedown="banDrop = true" 
                         @input="textareaIpt" 
                         @blur="textareaBlur($event)" 
                         @focus="textareaFocus = true" 
      :readonly="isReadOnly(vm.currentDrawData)"></textarea>-->
      <!--style="font-size:14px;font-weight: 800;font-family: '宋体';"-->
      <!-- <div class="inset_txt_out">
                            <ul>
                                <li v-for="(val, key) in fastInsertTxtObj" 
                                @click="fastInsertFn(val, key)" :title="val" :key="key">{{val}}</li>
                            </ul>
                        </div>
                        <div class="self_sign_out">
                            <span :class="{seleted : ename == vm.currentDrawData.type}" 
                            v-for="(cname, ename) in checkType" 
                            @click="selectTag(ename, cname)" 
                            :title="cname" :key="ename">{{cname}}</span>
                        </div>
                    </div>
                </div>
      </transition>-->
      <div class="point_set_sign_wrapper" v-show="pointPopupShow" @click.stop>
        <div class="ponit_in_box">
          <span class="l" @click="setPointSign('top')">上边界点</span>
          <span class="c" @click="setPointSign('bottom')">下边界点</span>
          <span class="r" @click="setPointSign('normal')">普通点</span>
          <span class="jt"></span>
        </div>
      </div>
    </div>
    <div class="content_right" :class="{cls : isRightCls}">
      <div class="content_right_one">
        <div class="content_right_one_top">
          <div class="right_top_icon"></div>
          <div class="rectangle" title="矩形 (A)">
            <i @click="sendclickType(1)"></i>
          </div>
          <div class="polygon" title="多边形 (Z)">
            <i @click="sendclickType(2)"></i>
          </div>
          <i class="whippletree"></i>
        </div>
        <div class="content_right_one_bottom">
          <div class="right_bottom_icon"></div>
          <div class="multiple_choice" title="解答题转写">
            <i @click="sendclickType(5, 'jieda')"></i>
          </div>
          <div :class="{machine : true}" class="machine1" title="速算题转写">
            <i @click="sendclickType(5, 'susuan')"></i>
          </div>
          <div :class="{machine : true}" class="machine2" title="填空题转写">
            <i @click="sendclickType(5, 'tiankong')"></i>
          </div>
          <div :class="{machine : true}" class="machine3" title="自然场景转写">
            <i @click="sendclickType(5, 'zrcj')"></i>
          </div>
          <div :class="{machine : true}" class="machine4" title="辅助转写">
            <i @click="sendclickType(5, 'fuzhu')"></i>
          </div>
        </div>
        <span class="ck_r_btn" :class="{cls : isRightCls}" @click="isRightCls = !isRightCls"></span>
      </div>
      <div class="content_right_two" @scroll="scroll($event)">
        <div class="content_lebal_one_outbox">
          <div
            class="content_lebal_one"
            :id="item.id + '_list'"
            :class="{ select : item.id == vm.selectId, shadow : item.alias.split('-').length > 1 && item.id != vm.selectId}"
            @dragend="dragend($event)"
            :draggable="!filterBoxShow && !banDrop"
            @dragstart="dragStart($event, item)"
            :ref="'srl'+index"
            v-for="(item,index) in showList"
            :key="index"
            v-show="!item.isFirst && (interactive.screeningTag.length == 0 || interactive.screeningTag.indexOf(item.type) != -1)"
          >
            <div
              class="box"
              :class="{top : item.id + 's' == selDrapClass}"
              @dragover.stop="addHoverClass($event, item, 's')"
              @dragleave="dragleave($event)"
              @drop="changeOrder2(item)"
            >
              <div
                class="ins"
                :class="{listCldSty : item.alias.split('-').length == 2, listCldSty_2 : item.alias.split('-').length == 3, listCldSty_3 : item.alias.split('-').length == 4, seleted : item.id == vm.selectId}"
              ></div>
            </div>
            <div
              class="clear_both"
              style="padding: 10px 0;"
              :class="{listCldSty2 : item.alias.split('-').length > 1, listCldSty_2 : item.alias.split('-').length == 3, listCldSty_3 : item.alias.split('-').length == 4,seleted : item.id == vm.selectId}"
              @dragover.stop="addHoverClass($event, item, 'i')"
              @dragleave="dragleave($event)"
              @drop="pushChildren(item)"
            >
              <div class="content_lebal" @click="selAttrFn($event, index, item)">
                <i
                  :class="{bg1 : item.region == 'rect', bg2 : item.region == 'area', bg3 : item.region == 'polyline' }"
                ></i>
                <span
                  class="lebal"
                  :title="item | attrTitle"
                >{{!!item.type ? checkType[item.type] : item.unfold ? "" : item.text}}</span>
                <a :title="item.alias">{{item.alias}}</a>
                <div
                  class="textCope"
                  style="font-size: 14px;"
                  v-show="!item.unfold && !!item.type && !!item.text"
                >{{item.text}}</div>
              </div>
              <div class="lebal_list" v-show="item.unfold">
                <textarea
                  v-model="item.text"
                  @mouseup="textareaMouseUpFn($event)"
                  @mousedown="banDrop = true"
                  @input="textareaIpt"
                  :ref="item.id"
                  @blur="textareaBlur($event, item)"
                  :readonly="componentInfoHeader.showVersionInfo || isReadOnly(item)"
                ></textarea>
                <!--style="font-size:14px;font-weight: 800;font-family: '宋体';"-->
                <ul>
                  <li
                    v-for="(val, key) in fastInsertTxtObj"
                    @click="fastInsertFn(val, key, item)"
                    :key="key"
                    :title="val"
                  >{{val}}</li>
                </ul>
              </div>
            </div>
            <div
              class="box"
              @dragover.stop="addHoverClass($event, item, 'x')"
              :class="{bottom : item.id + 'x' == selDrapClass}"
              @dragleave="dragleave($event)"
              @drop="changeOrder2(item, 'down')"
            >
              <div
                class="ins"
                :class="{listCldSty : item.alias.split('-').length == 2, listCldSty_2 : item.alias.split('-').length == 3, listCldSty_3 : item.alias.split('-').length == 4,seleted : item.id == vm.selectId}"
              ></div>
            </div>
            <div class="drop_in_sel" v-show=" item.id + 'i' == selDrapClass"></div>
          </div>
        </div>
      </div>
      <div class="right_bt_box" @dragover="listDownMousewheel($event)">
        <span class="del" @click="delectSelectBox" title="删除"></span>
        <span class="sx" @click="sxFn" title="筛选"></span>
      </div>
      <div class="sx_sel_box" v-show="filterBoxShow">
        <div class="sx_top_box">
          <span class="txt">筛选</span>
          <span class="icon" @click="changeScreeningCls"></span>
        </div>
        <ul>
          <li
            :class="{seleted : interactive.screeningTag.indexOf(ename) != -1}"
            v-for="(cname, ename) in checkType"
            :key="ename"
            @click="changeScreening(ename, cname)"
            :title="cname"
          >{{cname}}</li>
        </ul>
      </div>
      <div
        class="lebal-lebals"
        ref="lebals"
        v-show="JSON.stringify(checkType) != '{}' && lebalLebals"
      >
        <span
          :class="{seleted : ename == vm.currentDrawData.type}"
          v-for="(cname, ename) in checkType"
          :key="ename"
          @click="selectTag(ename, cname)"
          :title="cname"
        >{{cname}}</span>
      </div>
    </div>
  </div>
</template>

<script>
import BottomControl from "@/components/mark/BottomControl";
let svg = null,
  self = null;
export default {
  name: "MarkContent",
  data() {
    return {
      vm: null,
      interactive: {
        screeningShow: false, // 是否显示筛选框
        screeningTag: [], // 需要筛选的属性
        saveSuccess: true, // 当前数据保存是否成功
        currentFinished: false // 当前图片是否加载完毕
      }, // 交互相关
      copeAttrCnt: "", //继承属性
      arrowShow: false, // 隐藏头部标识
      tipYc: false, // 隐藏显示文件名
      poppupShow: false, // 快捷编辑框 隐藏展示
      pointPopupShow: false, // 边界点标注框隐藏显示
      isRightCls: false // 右边标注内容列表 隐藏显示
    };
  },
  props: {
    files: {
      type: Object,
      default: () => ({})
    }
  },
  created() {
    self = this;
  },
  mounted() {
    this.$on("initFile", this.initFile);
  },
  methods: {
    initFile(item) {
      this.initAboutImgData(true); // 清理画框 初始化所有和图片相关的信息
      if (self.Utils.isNull(item)) {
        self.vm.imgData.imgPath = "";
      }
      self.vm.imgData.imgPath = item.url;

      self.interactive.currentFinished = false; // 初始化
      self.interactive.screeningTag = []; // 初始化选中标签
      self.interactive.screeningShow = false; // 默认不展示

      svg = new OcrPublicClass(this.vm); // 实例化图形
    },
    /**
     * 初始化和图片相关的参数
     * ①销毁svg实例 ②初始化相关参数 destroy 为true 代表全部销毁 false 代表只初始化参数
     */
    initAboutImgData: function(destroy) {
      if (destroy) {
        svg = null; // 销毁svg实例 并且将整个svg 销毁
        try {
          SVG.get("#_drawing").remove();
        } catch (e) {}
      }
      this.$set(this, "vm", {
        // SVG 绘图相关的属性
        el: "drawing", // SVG 挂载点
        height: "100%", // SVG 渲染高度
        width: "100%", // SVG 渲染宽度
        type: "click", // 当前绘图的类型
        currentDrawData: {}, // 当前绘制图形的属性值
        currentId: 0, // 当前标注的文件序列 唯一不重复即可
        selectId: "", // 当前选中的 SVG 图像的id  主要为了获取当前选择的图形id
        maxId: 0, //当前图形中最大的Id
        list: [], // 图形数据 由于层级关系 需要用到
        isDisableRightKey: true, // 是否禁用右键
        zoom: 1, // 缩放比例
        maxZoom: 15, // 最大缩放比例
        minZoom: 0.02, // 最小缩放比例
        strokeWidth: 2, // 生成线的大小
        dragPointSize: 10, // 拖拽点的 大小
        textSize: 12, // 文本默认大小
        rotateDeg: 1, // 0 0, 1 90, 2 180 , 3  270,
        leaveEnd: false, // 是否离开使用
        imgData: {
          // 图片的基本信息
          imgPath: "http://ainote.iflytek.com/static/images/reg_bg.jpg", // http://127.0.0.1:8081/static/img/test.3036edb.jpg
          width: 0,
          height: 0,
          x: 0,
          y: 0
        },
        canChooseP: true, //是否开启选中多边形呢的折线
        svgHightLightClass: "svg-highlight", // 高亮的calss
        currentPolyLineId: "", // 当前折线的id
        clickCallBack: this.setClick, // 点击的回掉函数
        successCallBack: this.successCallBack, // 绘图结束后的回掉
        drawFailCallBack: this.drawFailCallBack, // 绘制失败回调
        imgLoadCallBack: this.imgLoadCallBack, // svg img绘图成功后的回调
        changeCallBack: this.changeCallBack, // 图形修改后的回调
        pointMouseDown: this.pointCallBack,
        svgNodeClickCallBack: this.svgNodeClickCallBack, // svg单击回调函数
        svgNodeDblclickCallBack: this.svgNodeDblclickCallBack, // svg双击回调函数
        pointContextmenuCallback: this.pointContextmenuCallback, // 点右击事件
        dragPointMoveCallback: this.dragPointMoveCallback, // 拖拽点移动回调
        graphicsMoveCallback: this.graphicsMoveCallback // 图形移动回调
      });
    },
    /**
     * 图片加载成功后的回调  新增
     */
    imgLoadCallBack: function() {
      // 这里关联了 current 和 list
      var svgOutDomW = $("#drawing").width(),
        svgOutDomH = $("#drawing").height();
      var imgData = self.vm.imgData;
      var rate = 1;
      // 设置文本缩放比
      if (imgData.width > imgData.height) {
        rate = (imgData.width / svgOutDomW).toFixed(2) * 2;
      } else {
        rate = (imgData.height / svgOutDomH).toFixed(2);
      }
      self.vm.textSize = rate > 1 ? rate * 14 : 14;
      self.interactive.currentFinished = true; // 图形加载完毕
      self.dataConversion(self.files.current.result, true, true); // 这个current.result 可以是开始给的数组 也可能是标注过程中使用的对象;
      // 初始化 给每个图形dom绑定type 供筛选使用
      this.vm.list.forEach(function(lists) {
        $(SVG.get(lists.id).node).attr("type", lists.type);
        lists.isShow = true;
      });
      // 初始化不显示第一条折线
      var resultArr = self.files.current.result;

      self.firstLineInit(resultArr); // 初始化隐藏第一天折线
    },
    // 数据转换  新增  isFirst 是否是第一层层
    dataConversion: function(list, isDraw, isFirst) {
      var data = [],
        maxId = 0,
        numId = "";
      var type = Object.prototype.toString.call(list);
      if (type === "[object Array]") {
        for (var i = 0; i < list.length; i++) {
          var region = list[i].region; // 图形类型
          var id = list[i].id; // 当前图形的id
          var pId = list[i].pId; // 当前图形的pId
          if (region === "rect") {
            list[i].id =
              typeof id === "number"
                ? "r-" + id
                : id.indexOf("r-") === -1
                ? "r-" + id
                : id; // 取最大的数
          } else if (region === "area") {
            list[i].id =
              typeof id === "number"
                ? "p-" + id
                : id.indexOf("p-") === -1
                ? "p-" + id
                : id; // 取最大的数
            list[i].points = this.polygonToNeed(list[i].points); // 多边形 point s 转换
          } else if (region === "polyline") {
            list[i].id =
              typeof id === "number"
                ? "pl-" + id
                : id.indexOf("pl-") === -1
                ? "pl-" + id
                : id; // 取最大的数
            list[i].points = this.polygonToNeed(list[i].points); // 多边形 point s 转换
            list[i].pId =
              typeof pId === "number"
                ? "p-" + pId
                : pId.indexOf("p-") === -1
                ? "p-" + pId
                : pId; // 取最大的数
          }

          if (typeof id !== "number") {
            // id 不是数字的是否
            numId = id.match(/\d+/g);
            if (numId) {
              // 存在数字
              id = Number(numId[0]);
              if (isNaN(id)) {
                id = i;
              }
            } else {
              // 不存在数字
              id = i;
            }
          }

          if (id > self.vm.maxId) {
            self.vm.maxId = id;
          }

          if (isFirst) {
            data.push(list[i]);
          }

          if (list[i].children && list[i].children.length > 0) {
            self.dataConversion(list[i].children, isDraw, false);
          }
        }
        this.vm.currentId = Number(self.vm.maxId + 1); // 赋值最大的id
      } else {
        for (var j in list) {
          // 只是用来计算最大的id
          var id = list[j].id; // 获取当前的id
          if (typeof id !== "number") {
            // id 不是数字的是否
            numId = id.match(/\d+/g);
            if (numId) {
              // 存在数字
              id = Number(numId[0]);
              if (isNaN(id)) {
                id = i;
              }
            } else {
              // 不存在数字
              id = i;
            }
          }

          if (id > self.vm.maxId) {
            self.vm.maxId = id;
          }
        }
        this.vm.currentId = Number(self.vm.maxId + 1); // 赋值最大的id
        data = list;
      }

      this.vm.list = data; // 整体赋值
      this.synchToFile(); // 同步 current 和 list
      if (isDraw) {
        this.drawByList(this.vm.list); // 绘制图形
      } else {
        return data;
      }
    },
    // 根据数据绘制图形  新增
    drawByList: function(data) {
      svg.drawByListData(data);
    },
    // 解析点数据格式
    polygonToNeed: function(points) {
      var pointsData = [];
      var type = typeof points;

      if (type === "object") {
        for (var i = 0, len = points.length; i < len; i++) {
          pointsData.push(points[i]);
        }
      } else if (type === "string") {
        points
          .replace(/\(|\)/g, "")
          .replace(/ /g, ";")
          .split(";")
          .filter(function(item) {
            if (item.indexOf(",") > 0) {
              var num = item.split(",");
              for (var i = 0; i < num.length; i++) {
                num[i] = Number(num[i]);
              }
              pointsData.push(num);
            }
          });
      }
      return pointsData;
    },
    firstLineInit: function(data) {
      if (Object.prototype.toString.call(data) === "[object Array]") {
        for (var i = 0; i < data.length; i++) {
          if (
            data[i].region === "area" &&
            data[i].children &&
            data[i].children[0]
          ) {
            // 找列表中存在的多边形
            self.setLine(data[i].id, data);
          }
          if (data[i].children && data[i].children[0]) {
            self.firstLineInit(data[i].children);
          }
        }
      }
    },
    // 折线排序 根据父级多边形id
    setLine: function(id, lists) {
      var info = [],
        allLine = [];
      getLine(lists, info);

      function getLine(data, info) {
        data.forEach(function(item, index) {
          if (item.children && item.children.length > 0) {
            if (item.pId === id) {
              allLine.push(item);
            }
            getLine(item.children, info);
          } else {
            if (item.pId === id) {
              allLine.push(item);
            }
          }
        });
      }
      return this.sortLine(allLine);
    },
    sortLine: function(allLine) {
      var compareArr = [],
        first = [];
      for (var i = 0, len = allLine.length; i < len; i++) {
        if (allLine[i].region === "polyline") {
          allLine[i].points = self.polygonToNeed(allLine[i].points);
          compareArr.push([allLine[i].points[0][1], allLine[i].id]); // 获取第一个点的Y
        }
      }
      first = compareArr.sort(sortByY);

      function sortByY(f, s) {
        return f[0] - s[0];
      }

      return this.setSignByLine(allLine, first);
    },
    setSignByLine: function(allLine, first) {
      var firstLine = null;
      for (var i = 0; i < allLine.length; i++) {
        if (allLine[i].id === (first[0] && first[0][1])) {
          allLine[i].isFirst = true;
          firstLine = allLine[i];
        } else {
          allLine[i].isFirst = false;
        }
      }
      self.refresh++;
      return firstLine;
    },
    /**
     *  图片绘制成功后的回调
     * @param domObject 绘制成功后的图形对象 rect polygon po
     */
    successCallBack: function(domObject) {
      var id = domObject.id(); // 获取对象id
      self.drawOver = true; // 绘制结束标识
      if (this.checkboxsGroup.inHeritAttr && !!this.copeAttrCnt) {
        $(domObject.node).attr("type", this.copeAttrCnt);
      }

      svg.initCursor(); // 初始化光标
      // 是否开启继承层级
      if (this.checkboxsGroup.hierarchy) {
        var vmList = this.showList,
          hierarchyDom = null;
        // 继承层级条件过滤
        if (this.hierarchyId === "") {
          // 首先 得有继承的层级图形
          self.ui.fade("继承层级功能已开启,未选择需要继承的层级！");
          self.setDrawData(domObject, "add"); // 数据处理
        } else if (
          !vmList.some(function(item) {
            if (item.id === self.hierarchyId) {
              hierarchyDom = item;
            }
            return item.id === self.hierarchyId;
          })
        ) {
          self.ui.fade("继承层级图形不存在");
          self.setDrawData(domObject, "add"); // 数据处理
        } else {
          // 继承层级 的数据操作
          self.setDrawData(domObject, "push");
        }
      } else {
        // 未开启继承层级 第一次数据列表追加新数据
        self.setDrawData(domObject, "add"); // 数据处理
      }

      self.setClick(id); // 相当于重新触发一次点击事件
      if (this.checkboxsGroup.showEditPop) {
        // 新需求 绘制完成后 快速弹出编辑框 // 快速弹框
        self.svgNodeDblclickCallBack({ offsetX: 0, offsetY: 0 });
      }
      self.calculateModificationRate(this.vm.currentDrawData); // 计算修改率
      this.vm.type = "click"; // 初始化绘制类型
      this.lastType = "click"; // 初始化上次绘制类型
      if (/^pl-\d+/g.test(id)) {
        // 折线第一条隐藏
        this.setLine(domObject.data("parent"), this.vm.list);
      }
    },
    // 数据设置  domObject 图形对象 handleType 处理方式  新增 oId 新增  旧ID 矩形转多边形
    setDrawData: function(domObject, handleType, oId) {
      var id = domObject.id(),
        type = domObject.type,
        data = {};
      var attrType = $(domObject.node).attr("type"); // 获取继承的属性 只有开启继承 初始绘制完成才有默认属性
      if (type === "rect") {
        data = {
          id: id,
          region: "rect",
          w: domObject.width(),
          h: domObject.height(),
          x: domObject.x(),
          y: domObject.y(),
          dom: domObject.node,
          text: "",
          alias: this.successNum + "",
          type: attrType === undefined ? "" : attrType,
          machineTxt: "",
          markTxt: "",
          checkTxt: "",
          markModifyRate: this.base.step === 0 ? 100 : "--",
          checkModifyRate: this.base.step === 1 ? 100 : "--",
          qualityModifyRate: this.base.step === 2 ? 100 : "--"
        };
      } else if (type === "polygon") {
        data = {
          id: domObject.id(),
          text: "",
          region: "area",
          points: domObject.attr("points"),
          dom: domObject.node,
          type: attrType === undefined ? "" : attrType,
          machineTxt: "",
          markTxt: "",
          checkTxt: "",
          markModifyRate: this.base.step === 0 ? 100 : "--",
          checkModifyRate: this.base.step === 1 ? 100 : "--",
          qualityModifyRate: this.base.step === 2 ? 100 : "--"
        };
      } else if (type === "polyline") {
        // 折线不需要添加属性
        data = {
          id: domObject.id(),
          text: "",
          region: "polyline",
          pId: domObject.data("parent"),
          points: domObject.attr("points"),
          dom: domObject.node
        };
      }

      if (handleType === "add" && type === "polygon") {
        // jbc 修改
        var pointArr = data.points.split(" ");
        if (pointArr.length === 4) {
          data.startPoint = pointArr[0].split(",");
          data.startPointInd = 0;
          data.endPoint = pointArr[2].split(",");
          data.endPointInd = 2;
        }
        this.vm.list.push(data);
      } else if (handleType === "add" && type === "rect") {
        // jbc 修改
        data.startPoint = [data.x, data.y];
        data.startPointInd = 0;
        data.endPoint = [data.x + data.w, data.y + data.h];
        data.endPointInd = 3;

        this.vm.list.push(data);
      } else if (handleType === "change") {
        this.findDataFromArr(domObject.id(), this.vm.list, 1, data);
      } else if (handleType === "add" && type === "polyline") {
        this.findDataFromArr(domObject.data("parent"), this.vm.list, 2, data);
      } else if (handleType === "conversion") {
        this.findDataFromArr(oId, this.vm.list, 3, data);
      } else if (handleType === "push" && type === "polygon") {
        var pointArr = data.points.split(" ");
        if (pointArr.length === 4) {
          data.startPoint = pointArr[0].split(",");
          data.startPointInd = 0;
          data.endPoint = pointArr[2].split(",");
          data.endPointInd = 2;
        }
        this.findDataFromArr(this.hierarchyId, this.vm.list, 2, data);
      } else if (handleType === "push" && type === "rect") {
        // jbc 修改
        data.startPoint = [data.x, data.y];
        data.startPointInd = 0;
        data.endPoint = [data.x + data.w, data.y + data.h];
        data.endPointInd = 3;
        this.findDataFromArr(this.hierarchyId, this.vm.list, 2, data);
      }
      this.synchToFile();
    },
    //  数据同步  新增
    synchToFile: function(id) {
      var list = Object.assign([], [], this.vm.list);
      if (id) {
        this.files.current.result[id] = Object.assign(
          this.files.current.result[id] ? this.files.current.result[id] : [],
          this.vm.list[id]
        );
      }
      // this.files.current.result = Object.assign([] ,[], this.vm.list);
      self.$set(this.files.current, "result", list);
      this.vm.list = this.files.current.result;
    },
    // 从数组中查找数据 id 当前数据的id  data 目标源数据 isChange (1)是否修改 (2)是否添加为子元素 (3)是否是矩形转多边形  info 新数据  新增
    findDataFromArr: function(id, data, isChange, info) {
      for (var i = 0; i < data.length; i++) {
        if (data[i].children && data[i].children.length > 0) {
          if (data[i].id === id) {
            if (isChange === 1) {
              if (data[i].region === "rect") {
                data[i].w = info.w;
                data[i].h = info.h;
                data[i].x = info.x;
                data[i].y = info.y;
              } else {
                data[i].points = info.points;
              }
            }
            if (isChange === 2) {
              // self.$set(data[i], 'children', data[i].children || [])
              data[i].children = data[i].children || [];
              data[i].children.push(info);
            }

            if (isChange === 3) {
              delete data[i].w;
              delete data[i].h;
              delete data[i].x;
              delete data[i].y;
              data[i].id = info.id;
              data[i].region = "area";
              data[i].points = info.points;
              data[i].dom = info.node;
            }
            return data[i];
          }
          this.findDataFromArr(id, data[i].children, isChange, info);
        } else {
          if (data[i].id === id) {
            if (isChange === 1) {
              if (data[i].region === "rect") {
                data[i].w = info.w;
                data[i].h = info.h;
                data[i].x = info.x;
                data[i].y = info.y;
              } else {
                data[i].points = info.points;
              }
            }
            if (isChange === 2) {
              data[i].children = data[i].children || [];
              data[i].children.push(info);
            }

            if (isChange === 3) {
              delete data[i].w;
              delete data[i].h;
              delete data[i].x;
              delete data[i].y;
              data[i].id = info.id;
              data[i].region = "area";
              data[i].points = info.points;
              data[i].dom = info.node;
            }
            return data[i];
          }
        }
      }
    },
    // 绘制失败回调
    drawFailCallBack: function(failType) {
      this.drawOver = true;
      if (failType === "counterclockwise") {
        return self.ui.fade("请顺时针绘制多边形");
      }
    },
    // 图形修改后的回调  新增
    changeCallBack: function(domObject) {
      var id = domObject.id();
      self.setDrawData(domObject, "change");
    },
    // 控制点的回调
    pointCallBack: function(id) {
      // 点id
      var curData = this.vm.currentDrawData;

      if (curData.region == "rect" && this.ctrlDown) {
        // ctrl + 矩形
        var cx = SVG.get(id).cx(),
          cy = SVG.get(id).cy();
        this.rectanglePolygon(curData.id, cx, cy);
      }
    },
    svgNodeClickCallBack: function(e) {
      // e.stopPropagation();
    },
    // svg图形双击
    svgNodeDblclickCallBack: function(e, svgNode) {
      if (self.history.show || self.history.showVersionInfo) return;
      var offsetX = e.offsetX,
        offsetY = e.offsetY;
      var outBoxWidth = $(".content_left").innerWidth(),
        outBoxHeight = $(".content_left").innerHeight();
      var popupWidth = $(".self_popup_wrapper").innerWidth(),
        popupHeight = $(".self_popup_wrapper").innerHeight();

      if (offsetX + popupWidth > outBoxWidth) {
        $(".self_popup_wrapper").css({
          left: "auto",
          right: "0px"
        });
      } else if (offsetX - 255 < 0) {
        $(".self_popup_wrapper").css({
          left: "0px",
          right: "auto"
        });
      } else {
        $(".self_popup_wrapper").css({
          left: offsetX - 255 + "px",
          right: "auto"
        });
      }
      if (offsetY + popupHeight + 60 > outBoxHeight) {
        $(".self_popup_wrapper").css({
          top: "auto",
          bottom: "28px"
        });
      } else {
        $(".self_popup_wrapper").css({
          top: offsetY + 40 + "px",
          bottom: "auto"
        });
      }

      this.poppupShow = true;
    },
    // 操作点右击
    pointContextmenuCallback: function(e, svgNode) {
      if (self.history.show || self.history.showVersionInfo) return;
      var offsetX = e.offsetX,
        offsetY = e.offsetY;
      var popupBoxWidth = 240,
        popupBoxHeight = 38;
      var parentBoxWidth = $(".content_left").innerWidth(),
        parentBoxHeight = $(".content_left").innerHeight();
      var popupDom = $(".point_set_sign_wrapper");
      this.files.currentPoint = svgNode; // 重置当前操作点元素对象
      if (offsetX + popupBoxWidth > parentBoxWidth) {
        popupDom.css({
          left: offsetX - 224 + "px"
        });

        $(".jt").css({
          left: "214px"
        });
      } else {
        popupDom.css({
          left: offsetX - 14 + "px"
        });
        $(".jt").css({
          left: "6px"
        });
      }
      if (offsetY < 54) {
        // 小于弹窗的高度 弹窗的小箭头放到上面
        popupDom.css({
          top: offsetY + 22 + "px"
        });
        $(".jt").css({
          top: "-10px",
          transform: "rotateZ(180deg)",
          "-webkit-transform": "rotateZ(180deg)"
        });
      } else {
        popupDom.css({
          top: offsetY - 58 + "px"
        });
        $(".jt").css({
          top: "38px",
          transform: "none",
          "-webkit-transform": "none"
        });
      }
      this.pointPopupShow = true;
    },
    // 拖拽点移动 (bcjia 只针对多边形，矩形点的坐标 和 实际坐标有出入，具体细节没有定位)
    dragPointMoveCallback: function(e, svgNode) {
      var pointType = $(svgNode.node).attr("point-type");
      if (!!pointType && !/^r-\d+/g.test(svgNode.data("parent"))) {
        if (pointType === "startPoint") {
          self.$set(this.vm.currentDrawData, "startPoint", [
            svgNode.cx(),
            svgNode.cy()
          ]);
        } else if (pointType === "endPoint") {
          self.$set(this.vm.currentDrawData, "endPoint", [
            svgNode.cx(),
            svgNode.cy()
          ]);
        }
      }
    },
    // 图形移动回调 bcjia
    graphicsMoveCallback: function(e, svgNode) {
      // console.log('movemovemovmemove', svgNode)
      var currentArea = this.vm.currentDrawData,
        startInd = currentArea.startPointInd,
        endInd = currentArea.endPointInd,
        type = currentArea.region, // 图形类型
        pointArr; // 点的集合

      if (type === "rect") {
        currentArea.x = currentArea.x * 1;
        currentArea.y = currentArea.y * 1;
        currentArea.w = currentArea.w * 1;
        currentArea.h = currentArea.h * 1;

        pointArr = [
          [currentArea.x, currentArea.y],
          [currentArea.x, currentArea.y + currentArea.h],
          [currentArea.x + currentArea.w, currentArea.y],
          [currentArea.x + currentArea.w, currentArea.y + currentArea.h]
        ];
      }

      if (currentArea.startPoint && startInd >= 0) {
        // 图形存在开始点
        if (type === "area") {
          pointArr = currentArea.points.split(" ");
          self.$set(
            this.vm.currentDrawData,
            "startPoint",
            pointArr[startInd].split(",")
          );
        } else if (type === "rect") {
          self.$set(this.vm.currentDrawData, "startPoint", pointArr[startInd]);
        }
      }
      if (currentArea.endPoint && endInd >= 0) {
        // 图形存在开始点
        if (type === "area") {
          pointArr = currentArea.points.split(" ");
          self.$set(
            this.vm.currentDrawData,
            "endPoint",
            pointArr[endInd].split(",")
          );
        } else if (type === "rect") {
          self.$set(this.vm.currentDrawData, "endPoint", pointArr[endInd]);
        }
      }
      // this.closeSignPopup(); // 关闭弹窗
    },
            /**
         * 点击后的回调函数  新增
         * @param id
         */
        setClick: function(id, source, e) {
            // 点击事件
            if (this.vm.selectId != id && !source) {
                this.globalCloseUnfold();
            }
            if (!e || (e && e.button === 0)) {
                // 绘图完成successCallback是mousedown触发，successCallback回调中会触发setCLick；插件返回的click事件在mouseUp触发，会触发两次；
                this.poppupShow = false;
                this.pointPopupShow = false; // 关闭点标记弹窗
            }
            if (!!id && !source) {
                // 点击图形 对应列表项 滚动到可视区域显示
                this.$nextTick(function() {
                    var clickDom = document.getElementById(id + "_list");
                    clickDom &&
                        $(".content_right_two").animate(
                            { scrollTop: clickDom.offsetTop - 200 },
                            300
                        );
                });
            }
            this.vm.selectId = id;
            // !source ? this.globalCloseUnfold() : '';
            var vmList = this.showList;
            for (var i = 0; i < vmList.length; i++) {
                if (vmList[i].id == id) {
                    self.$set(this.vm, "currentDrawData", vmList[i]); // 当前选择图形的信息对象
                    try {
                        self.graphicsMoveCallback();
                    } catch (e) {}
                    break;
                }
            }
            if (!this.checkboxsGroup.hierarchy && id != "defaultGroup") {
                // 继承层级开关 关闭时 才允许赋值
                this.hierarchyId = id;
            }
            svg.createDragPoint(id); // 图形被聚焦

            var currentArea = this.vm.currentDrawData;

            // 变色
            $(".adjust-size").each(function(ind, item) {
                var cx = $(item).attr("cx"),
                    cy = $(item).attr("cy");
                $(item).css({
                    fill: "rgb(0, 162, 255)"
                });
                $(item).attr("point-type", ""); // dom上添加标记
                if (currentArea.startPoint) {
                }
                if (
                    currentArea.startPoint &&
                    KeepEight(currentArea.startPoint[0]) === KeepEight(cx) &&
                    KeepEight(currentArea.startPoint[1]) === KeepEight(cy)
                ) {
                    $(item).css({
                        fill: "red"
                    });

                    $(item).attr({
                        "point-type": "startPoint",
                        title: "上边界点"
                    }); // dom上添加标记
                    self.$set(
                        self.vm.currentDrawData,
                        "startPointInd",
                        $(item).attr("data-point-index")
                    );
                }
                if (
                    currentArea.endPoint &&
                    KeepEight(currentArea.endPoint[0]) === KeepEight(cx) &&
                    KeepEight(currentArea.endPoint[1]) === KeepEight(cy)
                ) {
                    $(item).css({
                        fill: "green"
                    });
                    $(item).attr({
                        "point-type": "endPoint",
                        title: "下边界点"
                    }); // dom上添加标记
                    self.$set(
                        self.vm.currentDrawData,
                        "endPointInd",
                        $(item).attr("data-point-index")
                    );
                }
            });

            $("textarea").blur();
            svg.addHightlight(id);

            if (/^pl-\d+/g.test(id)) {
                SVG.get(id).addClass("no-fill");
                id = SVG.get(id).data("parent");
            }
            // 多边形事件绑定与销毁
            if (/^p-\d+/g.test(id)) {
                self.polygonBindEvent(id);
            }
        },
                // 多边形事件的销毁与绑定 新增
        polygonBindEvent: function(id) {
            id = id + "-group";
            var domElement = SVG.get(id);
            domElement.off("mousemove");
            domElement.off("mouseleave");
            domElement.on("mousemove", function() {
                svg.bindPolygon("mousemove");
            });
            domElement.on("mouseleave", function() {
                svg.bindPolygon("mouseleave");
            });
        },
                // 选择属性
        selectTag: function(ename, cname) {
            var id = this.vm.selectId; // 当前选中的id;
            var itemReadOnly = self.readOnly.indexOf(ename) > -1; // bcjia修改
            if (this.history.showVersionInfo || this.history.show) {
                // 查看历史时 不能修改
                return false;
            }

            if (id === "" || id === "defaultGroup") {
                return false;
            }
            if (this.vm.currentDrawData.type === ename) {
                // 如果上一次的 标签和 这一次的标签相同 则取消 2018/9/29
                self.$set(this.vm.currentDrawData, "type", "");
            } else {
                // 否则给当前的属性 2018/9/29
                self.$set(this.vm.currentDrawData, "type", ename);
                if (!this.checkboxsGroup.inHeritAttr) {
                    // 二次公测时 修改 只有在开关关闭时 才设置继承的属性
                    this.copeAttrCnt = ename; // 继承属性 保留最后一次选择的属性值
                }
            }

            if (itemReadOnly) {
                // bcjia修改 代表是特殊属性
                self.$set(this.vm.currentDrawData, "text", "");
            }

            $(this.vm.currentDrawData.dom).attr(
                "type",
                this.vm.currentDrawData.type
            ); // 在dom存type 用直接取 避免遍历
            this.vm.preMarkInfo = ""; // name 设置一个默认前者的 标签 暂时的需求是 不需要继承 上一次的属性了 2018/9/29
            // this.synchCurrentData('type',name)
        },
         // 增加筛选条件 (有的话 去掉,没有添加)
        changeScreening: function(ename, cname) {
            var exist = this.interactive.screeningTag.indexOf(ename);
            if (exist === -1) {
                this.interactive.screeningTag.push(ename);
                // self.$set(this.interactive.screeningTag, this.interactive.screeningTag.length, item)
            } else {
                this.interactive.screeningTag.splice(exist, 1);
            }
            self.showPaintboxByTag(this.interactive.screeningTag);
        },
        // 筛选框关闭
        changeScreeningCls: function() {
            this.filterBoxShow = false;
            self.$set(this.interactive, "screeningTag", []);
            this.showPaintboxByTag(this.interactive.screeningTag);
        },
                // 根据属性 展示 绘图框
        showPaintboxByTag: function(tags) {
            var doms = SVG.select(".area-box");
            var point = SVG.select(".adjust-size").members[0]; // 拖拽点
            var pointParent = ""; // 拖拽点 所属 父亲
            if (point) {
                pointParent = SVG.select(".adjust-size").members[0].data(
                    "parent"
                );
            }
            var list = this.vm.list;
            list.forEach(function(lists) {
                var id = lists.id;
                if (tags.length === 0) {
                    lists.isShow = true;
                    SVG.get(id + "-group") &&
                        SVG.get(id + "-group").attr("display", "block");
                    return;
                }
                if (tags.indexOf(lists.type) == -1) {
                    SVG.get(id + "-group") &&
                        SVG.get(id + "-group").attr("display", "none");
                    lists.isShow = false;
                    if (id === pointParent) {
                        // 如果当前元素 隐藏 是其点也相对隐藏
                        self.hidePoint(true);
                    }
                } else {
                    SVG.get(id + "-group") &&
                        SVG.get(id + "-group").attr("display", "block");
                    lists.isShow = true;
                    if (id === pointParent) {
                        // 如果当前元素 隐藏 是其点也相对隐藏
                        self.hidePoint(false);
                    }
                }
            });
        },
                // 隐藏点
        hidePoint: function(isHide) {
            var adjustSize = SVG.select(".adjust-size");
            adjustSize.each(function() {
                if (isHide) {
                    this.hide();
                } else {
                    this.show();
                }
            });
        },
                // 拖拽区域滚动事件
        scroll: function(e) {
            var outBoxH = $(".content_right_two").height();
            var targetH = $(this.$refs["lebals"]).height();
            var topVal = !this.arrowShow ? 100 : 50;
            if (!this.drapSrlDom) return; // 没有选中拖拽目标
            var eTop = this.drapSrlDom.getBoundingClientRect().top;
            if (targetH + eTop - topVal > outBoxH) {
                $(this.$refs["lebals"]).css({
                    bottom: "30px",
                    top: "auto"
                });
            } else if (eTop - topVal < 0) {
                $(this.$refs["lebals"]).css({
                    bottom: "auto",
                    top: "2px"
                });
            } else {
                $(this.$refs["lebals"]).css({
                    bottom: "auto",
                    top: eTop - topVal + "px"
                });
            }
        },
                // 选择属性
        selAttrFn: function(e, ind, item) {
            this.vm.type = "click";
            self.$set(this.vm, "currentDrawData", item); // 当前选择图形的信息对象
            this.cursorLocation = item.text.length;
            if (!item.unfold) {
                this.preListsObj && (this.preListsObj.unfold = false);
                this.preListsObj = item;
            }
            // console.log(this.vm.list)
            this.$nextTick(function() {
                var outBoxH = $(".content_right_two").height();
                this.drapSrlDom = this.$refs["srl" + ind][0];
                var targetH = $(this.$refs["srl" + ind][0]).height();
                // console.log($(this.$refs['srl'+ind][0]).height())
                var topVal = !this.arrowShow ? 100 : 50;
                var eTop = this.drapSrlDom.getBoundingClientRect().top;
                if (targetH + eTop - topVal > outBoxH) {
                    $(this.$refs["lebals"]).css({
                        bottom: "30px",
                        top: "auto"
                    });
                } else {
                    $(this.$refs["lebals"]).css({
                        bottom: "auto",
                        top: eTop - topVal + "px"
                    });
                }
                item.unfold = !item.unfold;
                if (item.region == "polyline") {
                    this.lebalLebals = false;
                } else {
                    this.lebalLebals = item.unfold;
                    if (this.lebalLebals) {
                        $(".lebal-lebals").scrollTop(0);
                    }
                }
            });
            this.setClick(item.id, "fromList");
            if (!this.history.showVersionInfo) {
                // 查看历史时，不能修改
                // this.controllShow(item.id, 0)
            }
        },
                // 绘图按钮 type: number 1 矩形 2 多边形 3 折线 （需要选中多边形）4 筛选 5 未知  6 拖拽
        sendclickType: function(type, zxType) {
            var self = this;
            this.poppupShow = false; // 快速编辑框 关闭
            if (this.history.showVersionInfo || this.history.show)
                return;
            if (this.files.current.isBad == 1) {
                return self.ui.fade("当前数据为坏数据，不允许进行绘制！");
            }

            // 继承层级条件过滤
            if (this.checkboxsGroup.hierarchy) {
                if (this.hierarchyId === "") {
                    // 首先 得有继承的层级图形
                    return self.ui.fade(
                        "继承层级功能已开启,未选择需要继承的层级！"
                    );
                }
                var vmList = this.showList; // 其次 选择的继承层级图形 还存在 (可能操作中间被删除)
                var hierarchyDom = null;
                if (
                    !vmList.some(function(item) {
                        if (item.id === self.hierarchyId) {
                            hierarchyDom = item;
                        }
                        return item.id === self.hierarchyId;
                    })
                ) {
                    return self.ui.fade("继承层级图形不存在");
                }
                if (!hierarchyDom.alias && hierarchyDom.isFirst) {
                    // 第一条折线
                    this.checkboxsGroup.hierarchy = false;
                    return self.ui.fade(
                        "当前父层级为多边形内第一条折线，不允许被继承！"
                    );
                }
                if (hierarchyDom.alias.split("-").length >= 4) {
                    // 继承的图形层级不能为四层
                    return self.ui.fade("最多嵌套4层,请重新选择继承层级图形");
                }
            }

            var drawType = "click";
            var dataType = typeof type;
            if (type == 5) {
                // 语义引擎操作
                return this.getOverallConversion(zxType);
            }
            if (dataType === "number") {
                if (type === 1) {
                    drawType = "rect";
                } else if (type === 2) {
                    drawType = "polygon";
                } else if (type === 3) {
                    // 开启继承层级按钮时
                    if (
                        this.checkboxsGroup.hierarchy &&
                        !/^p-\d+/g.test(this.hierarchyId)
                    ) {
                        self.ui.fade(
                            "折线只允许是多边形的子级,请重新选择继承层级"
                        );
                        svg.cancelDraw(); // 取消正在绘制
                        svg.initCursor(); // 初始化光标
                        self.drawOver = true;
                        self.vm.type = "click"; // 初始化绘制类型
                        self.lastType = "click"; // 初始化上次绘制类型
                        return;
                    }
                    // 没有开启继承层级时 需要点击聚焦多边形
                    if (
                        !this.checkboxsGroup.hierarchy &&
                        !/^p-\d+/g.test(this.vm.selectId)
                    ) {
                        self.ui.fade("请选择多边形");
                        svg.cancelDraw(); // 取消正在绘制
                        svg.initCursor(); // 初始化光标
                        self.drawOver = true;
                        self.vm.type = "click"; // 初始化绘制类型
                        self.lastType = "click"; // 初始化上次绘制类型
                        return;
                    } else if (this.checkboxsGroup.hierarchy) {
                        // this.vm.selectId = this.hierarchyId;
                        this.setClick(this.hierarchyId);
                    }
                    drawType = "polyline";
                } else if (type === 6) {
                    // 拖拽
                    drawType = "drag";
                }
            } else if (dataType === "string") {
                // 字符串 直接赋值
                if (type === "polyline") {
                    if (!/^p-\d+/g.test(this.vm.selectId)) {
                        self.ui.fade("请选择多边形");
                        return;
                    }
                }
                drawType = type;
            }

            if (drawType !== "drag") {
                // 如果不是拖拽 就记录
                this.lastType = drawType;
            }
            if (
                (drawType === "drag" ||
                    dataType === "rect" ||
                    dataType === "polygon" ||
                    dataType === "polyline") &&
                drawType !== this.vm.type &&
                svg.dm.currentDraw
            ) {
                svg.externalCheck();
            }

            if (this.vm.type && drawType !== this.vm.type) {
                svg.externalCheck(); // 校验当前图形是否符合规则
            }

            this.vm.type = drawType;

            // 设置光标
            if (this.vm.type === "polyline") {
                svg.setCursor();
            }
        },
                // 修改当前绘制状态(同时隐藏十字光标)
        changeType: function(type) {
            // 坏数据不允许进行绘制
            if (this.files.current.isBad == 1) {
                return self.ui.fade("当前数据为坏数据，不允许进行绘制！");
            }
            // 先做一次校验 , 查看历史不能切换 绘图状态
            if (
                (this.history.showVersionInfo ||
                    this.history.show) &&
                (type === "rect" || type === "polygon")
            ) {
                return false;
            }

            this.vm.type = type;

            if (type !== "drag") {
                // 如果不是拖拽 就记录
                this.lastType = type;
            }
            if (type === "drag") {
                svg.initCursor(); // 初始化光标
            }
        },
                // 获取光标位置 快速插入
        textareaMouseUpFn: function(e) {
            // e.preventDefault()
            this.banDrop = false;
            this.$nextTick(function() {
                this.cursorLocation = e.target.selectionStart;
            });
        },
                textareaIpt: function(e) {
            this.$nextTick(function() {
                this.cursorLocation = e.target.selectionStart;
            });
        },
                // 编辑框 失去焦点
        textareaBlur: function(e, item) {
            this.textareaFocus = false;
            var item = item ? item : this.vm.currentDrawData;
            this.calculateModificationRate(item);
        },
                // 快速插入标签 bcjia 修改
        fastInsertFn: function(val, key, item) {
            var item = item ? item : this.vm.currentDrawData;
            if (this.readOnly.indexOf(item.type) === -1) {
                item.text =
                    item.text.substring(0, this.cursorLocation) +
                    key +
                    item.text.substring(this.cursorLocation);
                this.cursorLocation += key.length;
            }
        },
                sxFn: function() {
            if (!this.history.showVersionInfo)
                return (this.filterBoxShow = true);
        },
                // 设置选择角度
        setImgRotate: function() {
            if (this.vm.rotateDeg === 4) {
                this.vm.rotateDeg = 1;
            } else {
                this.vm.rotateDeg++;
            }
            svg.setImageAngle(this.vm.rotateDeg);
        },
                cententLeftFn: function() {
            this.globalCloseUnfold();
            if (!this.textareaFocus) {
                this.poppupShow = false;
                this.pointPopupShow = false;
            }
        },
               getOverallConversion: function(zxType) {
            if (this.roboting) {
                // 判断是否正在转写
                self.ui.fade("正在转写中，请勿多次请求");
                return false;
            }

            var file = self.getFile(), // 当前文件内容
                url = file.url,
                params, // url
                host = "http://" + window.location.host, // 'http://' + window.location.host ,        // 'http://172.31.202.69' ,
                postUrl =
                    zxType === "jieda"
                        ? "/engine/ImgOCR/3_0/app"
                        : zxType === "susuan"
                            ? "/engine/ImgOCR/3_0/mpc"
                            : zxType === "tiankong"
                                ? "/engine/ImgOCR/3_0/blank "
                                : zxType === "zrcj"
                                    ? "/engine/ImgOCR/3_0/natural-scene"
                                    : zxType === "fuzhu"
                                        ? "/engine/ImgOCR/3_0/edu-assist"
                                        : ""; // 转写api
            var flatData = self.treeToFlatData(file.result);
            // 多边形提交 点的格式字符串转成数组
            flatData.forEach(function(item) {
                if (item.region == "area") {
                    item.points = self.polygonToNeed(item.points);
                } else if (item.region == "polyline") {
                    if (
                        typeof item.points != "object" &&
                        typeof item.points == "string"
                    ) {
                        // 折线point格式 保存时 再过滤一遍 确保保存的是[ [0,0] , [1,2] ]数组的格式
                        item.points = self.polygonToNeed(item.points);
                    }
                }
            });
            var record = JSON.stringify(flatData); // 标记框信息
            try {
                // 判断绘图框是否为空
                if (record == "[]") {
                    self.ui.fade("未检测到绘图框");
                    return false;
                }
            } catch (e) {
                self.ui.fade("未检测到绘图框");
                return false;
            }
            params = {
                url: host + url,
                resultText: record
            };

            params = JSON.stringify(params);

            this.postRequest(
                postUrl,
                params,
                "post",
                true,
                function(data) {
                    var resultText;
                    data = JSON.parse(data);

                    if (data.status == 500) {
                        // 500 状态
                        self.ui.error("转写失败");
                        return;
                    }

                    try {
                        resultText = JSON.parse(data.data);
                    } catch (e) {
                        console.warn("转写数据，和预期不相同，需要排查");
                        resultText = [];
                    }
                    self.overallConversion(JSON.parse(data.data));
                },
                function() {
                    self.ui.error("转写失败");
                }
            );
        },
              // 调用整体转换的接口
 
        postRequest: function(url, params, method, async, success, error) {
            var form = new FormData();
            var xmlhttp;

            form.append("data", params);

            if (window.XMLHttpRequest) {
                xmlhttp = new XMLHttpRequest();
            } else {
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }

            this.roboting = true; // 正在转写中

            if ($("body #loading").length == 0) {
                $("body").append(
                    '<div id="loading"><div class="rect1"></div><div class="rect2"></div><div class="rect3"></div><div class="rect4"></div><div class="rect5"></div></div>'
                );
            }

            xmlhttp.timeout = 30000; // 请求超时的时间
            xmlhttp.ontimeout = function(e) {
                // 请求超时
                self.ui.error("请求超时,转写失败");
                $("body #loading").remove();
                self.roboting = false;
            };
            xmlhttp.onerror = function(e) {
                // 请求失败
                self.ui.error("请求错误,转写失败");
                $("body #loading").remove();
                self.roboting = false;
            };
            xmlhttp.onreadystatechange = function() {
                // 请求中
                if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                    $("body #loading").remove();
                    self.roboting = false;
                    success(xmlhttp.responseText);
                } else if (xmlhttp.readyState == 4 && xmlhttp.status == 500) {
                    $("body #loading").remove();
                    self.roboting = false;
                    error();
                }
            };
            xmlhttp.open("POST", url, true);
            xmlhttp.send(form);
        },
        // 整体语义转换 (具体情况看返回数据)
        overallConversion: function(data) {
            if (typeof data !== "object") {
                console.warn("数据格式不符合规范");
                return false;
            }

            for (var i = 0, len = data.length; i < len; i++) {
                var id = data[i].id,
                    lists = this.showList;
                for (var j = 0; j < lists.length; j++) {
                    var readOnly = self.readOnly.indexOf(lists[j].type) > -1; // bcjia修改
                    if (lists[j].id === id) {
                        if (!!!lists[j].text && !readOnly) {
                            // 无转写文本时  才进行引擎转写
                            self.$set(lists[j], "text", data[i].text);
                            self.$set(lists[j], "machineTxt", data[i].text); // 赋值machineTxt
                        }
                        break;
                    }
                }
            }
            // 执行计算修改率
            this.calculateModificationRate(this.showList);
        },
                /**
         * 阻止默认事件
         * @param event
         */
        addHoverClass(event, item, l) {
            var event = event || window.event;
            if (event.preventDefault) {
                event.preventDefault();
            }
            var pAliasLen = this.temItem.alias.split("-").length;
            if (item.alias.slice(0, pAliasLen) === this.temItem.alias) return; // 父元素不能往子元素拖
            this.selDrapClass = item.id + l;
        },
        /**
         * 拖拽开始
         * @param item
         */
        dragStart: function(e, item) {
            if (this.filterBoxShow) {
                self.ui.fade("筛选中禁止拖拽");
            }
            e.dataTransfer.setData("text/plain", "");
            $(e.target).css({
                // 'visibility': 'hidden',
                opacity: 0.6
            });
            $(e.target)
                .children("div")
                .each(function(ind, items) {
                    $(items).css({
                        opacity: 0.6
                    });
                });
            this.temItem = item; // 获取当前获取元素的引用
        },
        dragend: function(e) {
            $(e.target).css({
                // 'visibility': 'visible',
                opacity: 1
            });
            $(e.target)
                .children("div")
                .each(function(ind, items) {
                    $(items).css({
                        opacity: 1
                    });
                });
            this.selDrapClass = "";
        },
        /**
         * 移动到上部分
         * @param item
         * @returns {boolean}
         */
        changeOrder2: function(item, type) {
            // 改变当前引用在对象中的位置
            // this.selDrapClass = '';
            if (this.temItem) {
                // 确保存在有效的被拖拽元素
                if (!item.alias || item.alias == 0) {
                    item.alias = "";
                }
                // 父元素不能被拖到子元素中
                if (item.alias.indexOf(this.temItem.alias) === 0) {
                    return false;
                }
                // 折线同级拖拽 源和目标的父层级值必须相同 只能在同父曲线区域内进行拖拽
                if (
                    this.temItem.region == "polyline" &&
                    (!item.parent ||
                        item.parent.alias != this.temItem.parent.alias)
                ) {
                    self.ui.fade("折线只允许在当前父曲线范围中进行拖拽！");
                    return false;
                }
                // if(item.region == 'polyline' && this.temItem.region != 'polyline'){ // 在存在折线的同级拖拽 如果源图形 不是折线 不进行操作
                //     ui.fade('多边形区域内存在折线，不允许嵌套矩形或多边形！')
                //     return false;
                // }
                // 改变当前对象的数据结构
                this.deleteItem(this.temItem); // 删除源
                var targetList = !item.parent
                    ? this.vm.list
                    : item.parent.children; // 获取目标引用所在的位置

                var inId = this.getItemIndex(targetList, item);
                if (inId != null) {
                    targetList.splice(
                        type === "down" ? inId + 1 : inId,
                        0,
                        this.temItem
                    );
                }
                // this.refreshList();

                this.refresh++;
            }
        },
        // 拖拽经过
        dragleave: function(e, item, l) {
            this.selDrapClass = "";
        },
        /**
         * 数组移除操作
         * @param item
         */
        deleteItem: function(item) {
            // 删除操作
            var tarList2 = !item.parent ? this.vm.list : item.parent.children;
            var rmId = this.getItemIndex(tarList2, item);
            if (rmId != null) {
                tarList2.splice(rmId, 1);
            }
        },
        /**
         * 获取元素位置
         * @param _list
         * @param _item
         * @returns {*}
         */
        getItemIndex: function(_list, _item) {
            var tmIndex = 0;
            for (var i = 0, len = _list.length; i < len; i++) {
                if (_list[i].id == _item.id) {
                    tmIndex = i;
                    break;
                }
            }
            return tmIndex;
        },
        /**
         * 移动到下部分
         * @param item
         * @returns {boolean}
         */
        pushChildren: function(item) {
            this.selDrapClass = "";
            if (this.temItem) {
                if (!item.alias || item.alias == 0) {
                    item.alias = "";
                }
                var num = 0;
                function calcNum(lists) {
                    lists.forEach(function(item) {
                        if (item.children && item.children[0]) {
                            num++;
                            calcNum(item.children);
                        }
                    });
                }
                if (this.temItem.children && this.temItem.children[0]) {
                    num++;
                    calcNum(this.temItem.children);
                }
                // 父级与祖宗元素不能拖到子集元素中
                if (item.alias.indexOf(this.temItem.alias) === 0) {
                    self.ui.fade("父元素不能往子元素拖拽");
                    return false;
                }
                // 最多4层
                if (num + item.alias.split("-").length > 3) {
                    self.ui.fade("最多嵌套四层！");
                    return;
                }

                // 折线不能进行嵌套
                if (this.temItem.region == "polyline") {
                    self.ui.fade("折线只能同级拖拽，不允许嵌套！");
                    return false;
                }
                // if(item.region == 'polyline'){
                //     ui.fade('折线内部不允许嵌套！')
                //     return false;
                // }
                // if (this.temItem.region != 'polyline') {
                //     var children = item.children;
                //     if (children && children[0]) {
                //         for (var i = 0; i < children.length; i++) {
                //             if (children[i].region == 'polyline') {
                //                 ui.fade('多边形区域内存在折线，不允许嵌套矩形或多边形！')
                //                 return;
                //             }
                //         }
                //     }
                // }
                if (!item.children) {
                    // 如果没有children 复制一份
                    item.children = [];
                }
                this.deleteItem(this.temItem);
                item.children.push(this.temItem);

                this.refresh++;
                // this.refreshList();
            }
        },
                /**
         *  拖拽区域快速上滑
         */
        listDownMousewheel: function(e) {
            if (this.downCanWheel) {
                this.downCanWheel = false;
                var maxTop =
                        $(".content_lebal_one_outbox").height() -
                        $(".content_right_two").height(),
                    scrollTop = $(".content_right_two").scrollTop();
                if (scrollTop < maxTop) {
                    $(".content_right_two").animate(
                        {
                            scrollTop:
                                scrollTop + $(".content_right_two").height()
                        },
                        800
                    );
                }
                var Timer = setTimeout(
                    function() {
                        this.downCanWheel = true;
                        clearTimeout(Timer);
                    }.bind(this),
                    1000
                );
            }
        },
        /**
         * 拖拽区域快速下滑
         */
        listUpMousewheel: function(e) {
            if (this.upCanWheel) {
                this.upCanWheel = false;
                var scrollTop = $(".content_right_two").scrollTop();
                if (scrollTop > 0) {
                    $(".content_right_two").animate(
                        {
                            scrollTop:
                                scrollTop - $(".content_right_two").height()
                        },
                        800
                    );
                }
                var Timer = setTimeout(
                    function() {
                        this.upCanWheel = true;
                        clearTimeout(Timer);
                    }.bind(this),
                    1000
                );
            }
        },
                /**
         * 展示文本
         */
        changeText: function(data) {
            for (var i = 0; i < data.length; i++) {
                if (data[i].children && data[i].children.length > 0) {
                    self.changeText(data[i].children);
                    if (!data[i].isFirst) {
                        svg.showText(true, data[i].id, data[i].alias);
                    }
                } else {
                    if (!data[i].isFirst) {
                        svg.showText(true, data[i].id, data[i].alias);
                    }
                }
            }
        },
  // 禁止文本输入框，输入文字
        isReadOnly: function(item) {
            if (this.readOnly.indexOf(item.type) > -1) {
                return true;
            }
            return false;
        },
        // 计算修改率
        calculateModificationRate: function(item) {
            var itemType = Object.prototype.toString.call(item).slice(8, -1);
            if (itemType === "Array") {
                item.forEach(function(grap) {
                    self.calculateModificationRate(grap);
                });
            } else if (itemType === "Object") {
                var originalTxt = "";
                if (this.base.step === 0) {
                    // 标注环境
                    originalTxt = item.machineTxt;
                } else if (this.base.step === 1) {
                    // 检查环节
                    originalTxt = item.markTxt;
                } else if (this.base.step === 2) {
                    // 质检环节
                    originalTxt = item.checkTxt;
                }

                if (item.children && item.children.length > 0) {
                    // bcjia 如果有子元素
                    self.calculateModificationRate(item.children);
                }

                if (!originalTxt || (originalTxt && !item.text)) {
                    // 没有机器文本 或者 有机器文本 无标注文本 修改率 100
                    this.base.step === 0
                        ? (item.markModifyRate = 100)
                        : this.base.step === 1
                            ? (item.checkModifyRate = 100)
                            : this.base.step === 2
                                ? (item.qualityModifyRate = 100)
                                : "";
                    return;
                }
                if (this.base.step === 0) {
                    item.markModifyRate = CompareTxtNew(
                        originalTxt,
                        item.text
                    ).modifyTate;
                } else if (this.base.step === 1) {
                    item.checkModifyRate = CompareTxtNew(
                        originalTxt,
                        item.text
                    ).modifyTate;
                } else if (this.base.step === 2) {
                    item.qualityModifyRate = CompareTxtNew(
                        originalTxt,
                        item.text
                    ).modifyTate;
                }
            }
        },
        // 矩形转多边形
        rectanglePolygon: function(id, cx, cy) {
            if (/^r-\d+/.test(id)) {
                // 矩形转
                svg.rectToPolygon(id, this.rectanglePolygonByData);
                SVG.select(".adjust-size").each(function() {
                    var cx2 = this.cx(),
                        cy2 = this.cy(),
                        id2 = this.id();
                    if (cx2 === cx && cy2 === cy) {
                        svg.setPointbPoint("", id2);
                    }
                });
            }
        },
        // 矩形转多边形后的处理
        rectanglePolygonByData: function(objDom, oId) {
            var id = objDom.id();
            self.setClick(id); // 设置id
            self.setDrawData(objDom, "conversion", oId);
        },

        /**
         * 文本的显示和隐藏
         */
        showTextContent: function() {
            var type = this.checkboxsGroup.serial;
            if (type) {
                self.changeText(this.vm.list);
            } else {
                svg.showText(false);
            }
        },
        /**
         * 继承层级
         */
        inheritHierarchy: function() {
            var hierarchy = this.checkboxsGroup.hierarchy,
                oldHierId = this.hierarchyId;
            this.hierarchyId = this.vm.selectId;

            if (!hierarchy) {
                if (oldHierId && SVG.get(oldHierId)) {
                    SVG.get(oldHierId).removeClass("svg-hierarchy");
                }
            } else {
                // 继承层级条件过滤
                if (this.hierarchyId === "") {
                    // 首先 得有继承的层级图形
                    this.checkboxsGroup.hierarchy = false;
                    this.hierarchyId = oldHierId;
                    return self.ui.fade("未选择需要继承的层级！");
                }
                var vmList = this.showList; // 其次 选择的继承层级图形 还存在 (可能操作中间被删除)
                var hierarchyDom = null;
                if (
                    !vmList.some(function(item) {
                        if (item.id === self.hierarchyId) {
                            hierarchyDom = item;
                        }
                        return item.id === self.hierarchyId;
                    })
                ) {
                    this.checkboxsGroup.hierarchy = false;
                    this.hierarchyId = oldHierId;
                    return self.ui.fade("继承层级图形不存在");
                }
                if (!hierarchyDom.alias && hierarchyDom.isFirst) {
                    // 第一条折线
                    this.checkboxsGroup.hierarchy = false;
                    this.hierarchyId = oldHierId;
                    return self.ui.fade(
                        "当前父层级为多边形内第一条折线，不允许被继承！"
                    );
                }
                if (hierarchyDom.alias.split("-").length >= 4) {
                    // 继承的图形层级不能为四层
                    this.checkboxsGroup.hierarchy = false;
                    this.hierarchyId = oldHierId;
                    return self.ui.fade("最多嵌套4层,请重新选择继承层级图形");
                }

                if (this.hierarchyId) {
                    SVG.get(this.hierarchyId).addClass("svg-hierarchy");
                }
            }
        },

    // 快捷编辑框 拖拽
    popupDrag: function(ev) {
      var ev = ev || event;
      var obj = document.getElementById("self_popup_wrapper");
      var disX = ev.clientX - obj.offsetLeft;
      var disY = ev.clientY - obj.offsetTop;

      if (obj.setCapture) {
        obj.setCapture();
      }
      document.onmousemove = function(ev) {
        var ev = ev || event;
        $(obj).css({
          left: ev.clientX - disX + "px",
          top: ev.clientY - disY + "px",
          right: "auto",
          bottom: "auto"
        });
      };

      document.onmouseup = function() {
        document.onmousemove = document.onmouseup = null;
        //释放全局捕获 releaseCapture();
        if (obj.releaseCapture) {
          obj.releaseCapture();
        }
      };

      return false;
    }
  },
      filters: {
        attrTitle: function(item) {
            if (!self.checkType) return "";
            return !!item.type
                ? self.checkType[item.type]
                : item.unfold ? "" : item.text;
        }
    },
  components: {
    BottomControl
  }
};
// 保留八位比较
function KeepEight(num) {
    return parseInt(num * 100000000) / 100000000;
}
</script>

<style lang="less" scoped>
.content {
  min-width: 1024px;
  display: flex;
  flex-flow: row nowrap;
  margin: 0 auto;
  position: absolute;
  left: 0;
  right: 0;
  top: 100px;
  bottom: 0;
  transition: all 0.4s linear;
  -webkit-transition: all 0.4s linear;
  overflow: hidden;
  .content_left {
    height: 100%;
    flex: 1;
    position: relative;
    .content_left_top {
      width: 100%;
      background: #5d5d5d;
      /* padding: 20px 0; */
      height: calc(100% - 28px);
    }
    .content_left_top img {
      position: absolute;
      top: calc(50% - 14px);
      left: 50%;
      transform: translate(-50%, -50%);
      max-width: 611px;
      max-height: 458px;
    }
  }
  .content_right {
    display: flex;
    flex-flow: row nowrap;
    width: 290px;
    border-top: 1px solid #bdbdbd;
    border-right: 1px solid #bdbdbd;
    height: 100%;
    position: relative;
    transition: width 0.4s;
    -webkit-transition: width 0.4s;
    .content_right_one {
      width: 40px;
      height: 100%;
      background: #f2f2f2;
      position: relative;
      text-align: center;
      .content_right_one_top {
        width: 40px;
        .rectangle {
          padding-top: 13px;
          i {
            display: inline-block;
            width: 19px;
            height: 19px;
            cursor: pointer;
            background: url("")
              no-repeat;
          }
          i:hover {
            background: url("")
              no-repeat;
          }
        }
        .polygon {
          margin-top: 14px;
          margin-bottom: 40px;
          i {
            display: inline-block;
            width: 19px;
            height: 19px;
            cursor: pointer;
            background: url("")
              no-repeat;
          }
          i:hover {
            background: url("")
              no-repeat;
          }
        }
        .broken_line {
          margin-top: 5px;
          i {
            display: inline-block;
            width: 40px;
            height: 18px;
            cursor: pointer;
            background: url("")
              no-repeat center bottom;
          }
          i:hover {
            background: url("")
              no-repeat center bottom;
          }
        }
        .whippletree {
          display: inline-block;
          width: 20px;
          height: 2px;
          cursor: pointer;
          background: url("");
        }
        .right_top_icon {
          height: 21px;
          background-image: url("");
          background-repeat: no-repeat;
          background-size: 24px auto;
          background-position: center 6px;
        }
      }
      .content_right_one_bottom {
        .multiple_choice {
          margin-top: 10px;
          i {
            display: inline-block;
            width: 21px;
            height: 21px;
            cursor: pointer;
            background-image: url("");
            background-repeat: no-repeat;
            background-size: 100% auto;
          }
          i:hover {
            background-image: url("");
          }
        }
        .machine {
          margin-top: 11px;
        }
        .machine1 {
          i {
            display: inline-block;
            width: 21px;
            height: 21px;
            cursor: pointer;
            background-image: url("");
            background-repeat: no-repeat;
            background-size: 100% auto;
          }
          i:hover {
            background-image: url("");
          }
        }
        .machine2 {
          i {
            display: inline-block;
            width: 21px;
            height: 21px;
            cursor: pointer;
            background-image: url("");
            background-repeat: no-repeat;
            background-size: 100% auto;
          }
          i:hover {
            background-image: url("");
          }
        }
        .machine3 {
          i {
            display: inline-block;
            width: 21px;
            height: 21px;
            cursor: pointer;
            background-image: url("");
            background-repeat: no-repeat;
            background-size: 100% auto;
          }
          i:hover {
            background-image: url("");
          }
        }
        .machine4 {
          i {
            display: inline-block;
            width: 21px;
            height: 21px;
            cursor: pointer;
            background-image: url("");
            background-repeat: no-repeat;
            background-size: 100% auto;
          }
          i:hover {
            background-image: url("");
          }
        }
        .right_bottom_icon {
          height: 21px;
          background-image: url("");
          background-repeat: no-repeat;
          background-size: 22px auto;
          background-position: center 6px;
        }
      }
      .ck_r_btn {
        width: 40px;
        height: 40px;
        display: block;
        position: absolute;
        left: 0;
        bottom: 0;
        cursor: pointer;
        background-image: url("");
        background-repeat: no-repeat;
        background-size: 22px auto;
        background-position: center 18px;
        transform: rotateZ(180deg);
        -webkit-transform: rotateZ(180deg);
        -webkit-transform-origin: 20px 26px;
        transform-origin: 20px 26px;
        transition: all 0.4s;
        -webkit-transition: all 0.4s;
      }
      .ck_r_btn.cls {
        transform: none;
        -webkit-transform: none;
        background-position: center 12px;
      }
    }
    .content_right_two {
      width: 250px;
      height: calc(100% - 28px);
      overflow-y: auto;
      overflow-x: hidden;
      border-left: 1px solid #bdbdbd;

      .content_lebal_one {
        width: 248px;
        text-align: left;
        border-bottom: 1px solid #dadbdb;
        position: relative;
        overflow: hidden;
        padding: 1.4px 0.7px 0.7px 0.7px;
        box-shadow: inset 0 0 0 0.7px #fff, inset 0 0 0 0.7px #dadbdb;
        -moz-box-shadow: inset 0 0 0 0.7px #fff, inset 0 0 0 0.7px #dadbdb;
        -o-box-shadow: inset 0 0 0 0.7px #fff, inset 0 0 0 0.7px #dadbdb;
        -ms-box-shadow: inset 0 0 0 0.7px #fff, inset 0 0 0 0.7px #dadbdb;
        border-top: 1.6px solid transparent;
        border-left: 1.6px solid transparent;
        border-right: 1.6px solid transparent;
        .clear_both::after {
          content: "";
          display: block;
          clear: both;
          height: 0;
        }
        .seleted {
          background: #fff;
        }
        a {
          display: inline-block;
          font-size: 12px;
          color: #999999;
          width: 50px;
          text-align: right;
          float: right;
          margin-right: 10px;
        }
        textarea {
          resize: none;
          width: 196px;
          height: 80px;
          margin-left: 30px;
          padding: 5px;
          font-size: 12px;
          color: #3b3b3b;
          line-height: 20px;
          margin-top: 10px;
        }
        .content_lebal {
          float: left;
          width: 100%;
          cursor: pointer;
          .bg1 {
            background-image: url("");
          }
          .bg2 {
            background-image: url("");
          }
          .bg3 {
            background-image: url("");
          }
          a {
            font-size: 12px;
            color: #999999;
          }
          i {
            display: inline-block;
            width: 12px;
            height: 12px;
            margin: 3px 5px 0 12px;
            cursor: pointer;
            float: left;
            background-repeat: no-repeat;
            background-size: 100% auto;
            background-position: center;
          }
        }
        .content_son_text {
          margin: -20px 0 0 35px;
          .sontext {
            width: 177px;
          }
        }
        .inner_text {
          padding: 10px 0;
          position: relative;
          span {
            display: inline-block;
            margin-left: 35px;
            width: 140px;
            font-size: 12px;
            color: #333333;
            font-family: PingFangSC-Regular;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
          }
          i {
            display: inline-block;
            width: 12px;
            height: 12px;
            position: absolute;
            top: 12px;
            margin: 0 5px 0 12px;
            background: url("");
          }
        }
        .lebal {
          display: inline-block;
          color: #333;
          font-size: 14px;
          width: 150px;
          cursor: pointer;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          float: left;
        }
        .content_text {
          float: left;
          margin-left: 5px;
          height: 40px;
          width: 203px;
        }
        .son_text {
          display: inline-block;
          width: 166px;
          font-size: 12px;
          color: #333333;
          font-family: PingFangSC-Regular;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          margin-top: 14px;
          line-height: 14px;
        }
        .content_lebal_oneson {
          border-bottom: none;
          background: #eaeaea;
        }
        .lebal_list ul {
          overflow: hidden;
          margin-left: 33px;
        }
        .lebal_list ul li {
          float: left;
          margin-right: 9px;
          width: 42px;
          font-size: 12px;
          line-height: 26px;
          color: #b3b3b3;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          cursor: pointer;
        }
        .top {
          height: 34px;
        }
        .bottom {
          height: 34px;
        }
        .bottom ::after {
          content: "�?插入";
          color: #fff;
          display: inline-block;
          position: absolute;
          font-size: 14px;
          left: 50%;
          top: 50%;
          transform: translate3d(-50%, -50%, 0);
          -webkit-transform: translate3d(-50%, -50%, 0);
        }
        .top ::after {
          content: "�?插入";
          color: #fff;
          display: inline-block;
          position: absolute;
          font-size: 14px;
          left: 50%;
          top: 50%;
          transform: translate3d(-50%, -50%, 0);
          -webkit-transform: translate3d(-50%, -50%, 0);
        }
        .top > .ins {
          height: 34px;
          background-color: #afafaf;
          box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, 0.15);
          /* background: -webkit-gradient(linear, 0 100%, 0 10%, from(#f2f3f4), to(#d2d2d2)); */
        }
        .bottom > .ins {
          height: 34px;
          background-color: #afafaf;
          box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, 0.15);
          /* background: -webkit-gradient(linear, 0 10%, 0 100%, from(#f2f3f4), to(#d2d2d2)); */
        }
        .drop_in_sel {
          width: 100%;
          height: 100%;
          background-color: rgba(200, 216, 236, 0.7);
          color: #4a90e2;
          font-size: 14px;
          text-align: center;
          line-height: 100%;
          position: absolute;
          left: 0;
          top: 0;
          border: 1px solid #4a90e2;
          pointer-events: none;
        }
        .drop_in_sel::after {
          content: "�?插入子层�?";
          display: inline-block;
          color: #4a90e2;
          transform: translate3d(-50%, -50%, 0);
          -webkit-transform: translate3d(-50%, -50%, 0);
          pointer-events: none;
          position: absolute;
          left: 50%;
          top: 50%;
        }
      }
      .content_lebal_one.select {
        border: 1.6px solid #4a90e2;
        background-color: #fff;
      }
      .content_lebal_one.shadow {
        box-shadow: inset 0 0 0 0.7px #dadbdb;
        -moz-box-shadow: inset 0 0 0 0.7px #dadbdb;
        -o-box-shadow: inset 0 0 0 0.7px #dadbdb;
        -ms-box-shadow: inset 0 0 0 0.7px #dadbdb;
      }
      .content_style {
        border-bottom: 1px solid #dadbdb;
      }
      .listCldSty {
        background-color: #eaeaea;
        border-bottom: none;
      }
      .listCldSty2 {
        background-color: #eaeaea;
        border-bottom: none;
      }
      .listCldSty_2 {
        background-color: #e3e3e3;
        border-bottom: none;
      }
      .listCldSty_3 {
        background-color: #dbdbdb;
        border-bottom: none;
      }
      .in {
        border: 1px solid #3299ff;
      }
    }
  }
  .content_right.cls {
    width: 40px;
  }
  .name_tip {
    min-height: 20px;
    line-height: 20px;
    background-image: linear-gradient(
      90deg,
      rgba(255, 255, 255, 1) 0%,
      rgba(255, 255, 255, 0%)
    );
    display: inline-block;
    position: absolute;
    left: 0;
    top: 0;
    color: #333;
    opacity: 0.5;
    min-width: 160px;
    max-width: 100%;
    cursor: pointer;
    text-align: left;
    padding: 2px 20px 2px 10px;
    word-break: break-all;
  }
  .name_tip.yc {
    width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .name_tip.zt {
    pointer-events: none;
  }
  .self_popup_wrapper {
    width: 510px;
    position: absolute;
    background-color: #fff;
    border-radius: 2px;
    padding: 1px;
    -webkit-box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.25);
    -moz-box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.25);
    -ms-box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.25);
    -o-box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.25);
    box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.25);
    border: 1px solid #a4a8ac;
    box-sizing: content-box;
    z-index: 9;
    .self_popup_in {
      width: 100%;
      background-color: #f3f3f3;
      border-radius: 2px;
      padding: 13px 11px 9px 12px;
    }
    .self_popup_textarea {
      width: 100%;
      height: 68px;
      border: 1px solid #c9c9d6;
      border-radius: 2px;
      background-color: #fff;
      color: #4d4d4d;
      padding: 4px 6px;
    }
    .inset_txt_out {
      width: 100%;
      padding: 6px 6px 12px 6px;
      position: relative;
      &::after {
        content: "";
        width: 508px;
        height: 0px;
        border-top: 1px solid #dadbdb;
        border-bottom: 1px solid #fff;
        position: absolute;
        left: -13px;
        bottom: 0;
      }
      & > ul {
        width: 100%;
      }
      & > ul::after {
        content: "";
        display: block;
        clear: both;
        height: 0;
      }
      li {
        float: left;
        margin-right: 9px;
        width: 42px;
        font-size: 12px;
        line-height: 26px;
        color: #666666;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        cursor: pointer;
      }
    }
    .self_sign_out {
      width: 100%;
      padding: 8px 6px 0px 6px;
      &::after {
        content: "";
        display: block;
        clear: both;
        height: 0;
      }
      & > span {
        display: inline-block;
        font-size: 14px;
        line-height: 28px;
        text-align: center;
        border: 1px solid #ececec;
        width: 62px;
        cursor: pointer;
        margin-right: 12px;
        float: left;
        border-radius: 3px;
        color: #333;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        background: #fff;
        padding: 0 4px;
        margin-bottom: 4px;
      }
      & > span.seleted {
        color: #14cb6b;
      }
    }
    .point_set_sign_wrapper {
      width: 248px;
      height: 38px;
      background-color: rgba(0, 0, 0, 0.8);
      position: absolute;
      left: 310px;
      top: 77px;
      border-radius: 6px;
      span {
        font-size: 14px;
        color: rgba(255, 255, 255, 0.8);
        text-align: center;
        line-height: 38px;
        width: 80px;
        display: inline-block;
        cursor: pointer;
      }
      & > .l {
        border-top-left-radius: 8px;
        border-bottom-left-radius: 8px;
        border-right: 1px solid rgba(255, 255, 255, 0.8);
      }
      & > .r {
        border-top-right-radius: 8px;
        border-bottom-right-radius: 8px;
        border-left: 1px solid rgba(255, 255, 255, 0.8);
      }
      .jt {
        width: 0;
        height: 0;
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        border-top: 10px solid rgba(0, 0, 0, 0.8);
        position: absolute;
        left: 6px;
        top: 38px;
      }
    }
  }
  .box {
    width: 100%;
    background-color: #f2f3f4;
    position: relative;
    & > .ins {
      height: 10px;
      /* background-color: #  fff; */
    }
    .seleted {
      background: #e0fdee;
    }
  }
  .clear_both {
    background-color: #f2f3f4;
  }
  .textCope {
    width: 240px;
    padding: 8px 24px 0 28px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    color: #333;
  }
  .right_bt_box {
    width: 249px;
    height: 28px;
    position: absolute;
    left: 40px;
    bottom: 0;
    line-height: 34px;
    -webkit-box-shadow: 0 -1px 6px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 -1px 6px rgba(0, 0, 0, 0.2);
    -o-box-shadow: 0 -1px 6px rgba(0, 0, 0, 0.2);
    -ms-box-shadow: 0 -1px 6px rgba(0, 0, 0, 0.2);
    box-shadow: 0 -1px 6px rgba(0, 0, 0, 0.2);
    text-align: center;
    & > .del {
      width: 14px;
      height: 14px;
      display: inline-block;
      background-image: url("");
      background-size: auto 14px;
      background-repeat: no-repeat;
      margin-right: 40px;
      cursor: pointer;
    }
    & > .sx {
      width: 14px;
      height: 14px;
      display: inline-block;
      background-image: url("");
      background-size: auto 14px;
      background-repeat: no-repeat;
      cursor: pointer;
    }
    & > .sx:hover {
      background-image: url("");
    }
    & > .del:hover {
      background-image: url("");
    }
  }
  .sx_sel_box {
    width: 240px;
    border-radius: 4px;
    background-color: #f3f3f3;
    position: absolute;
    right: 0;
    bottom: 30px;
    -webkit-box-shadow: 0 2px 15px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0 2px 15px rgba(0, 0, 0, 0.5);
    -o-box-shadow: 0 2px 15px rgba(0, 0, 0, 0.5);
    -ms-box-shadow: 0 2px 15px rgba(0, 0, 0, 0.5);
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.5);
    animation: fadeUp 0.4s 0s both;
    -webkit-animation: fadeUp 0.4s 0s both;
    & > ul {
      width: 100%;
      padding: 14px 0px 4px 18px;
      box-sizing: border-box;
      max-height: 100px;
      overflow: scroll;
    }
    & > ul::after {
      content: "";
      display: block;
      clear: both;
      height: 0;
    }
    & > ul li {
      width: 62px;
      height: 28px;
      text-align: center;
      line-height: 28px;
      font-size: 14px;
      color: #333;
      background-color: #fff;
      border-radius: 2px;
      float: left;
      margin-right: 10px;
      margin-bottom: 10px;
      cursor: pointer;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    & > ul .seleted {
      color: #14cb6b;
    }
  }
  .sx_top_box {
    width: 100%;
    height: 30px;
    border-bottom: #dadbdb 1px solid;
    padding: 0 0 0 11px;
    box-sizing: border-box;
    & > .txt {
      font-size: 14px;
      color: #333;
      float: left;
      line-height: 30px;
    }
    & > .icon {
      float: right;
      width: 30px;
      height: 30px;
      background-image: url("");
      background-repeat: no-repeat;
      background-size: 8px 8px;
      background-position: 11px 11px;
      cursor: pointer;
    }
  }
  .lebal-lebals {
    width: 234px;
    background: #f3f3f3;
    border-radius: 3px;
    position: absolute;
    top: 0;
    right: 290px;
    padding-bottom: 13px;
    -webkit-box-shadow: 0 2px 15px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0 2px 15px rgba(0, 0, 0, 0.5);
    -o-box-shadow: 0 2px 15px rgba(0, 0, 0, 0.5);
    -ms-box-shadow: 0 2px 15px rgba(0, 0, 0, 0.5);
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.5);
    animation: fadeR 0.2s 0s both;
    -webkit-animation: fadeR 0.2s 0s both;
    min-height: 56px;
    max-height: 232px;
    overflow-y: scroll;
    /* transition: all .2s linear;-webkit-transition: all .2s linear; */
    span {
      display: inline-block;
      font-size: 14px;
      line-height: 28px;
      text-align: center;
      border: 1px solid #ececec;
      width: 62px;
      margin-top: 13px;
      cursor: pointer;
      margin-left: 12px;
      float: left;
      border-radius: 3px;
      color: #333;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      background: #fff;
      padding: 0 4px;
    }
    .seleted {
      color: #14cb6b;
    }
  }
}
.zoomIn-enter-active {
  animation: zoom_in 0.2s 0s both;
  -webkit-animation: zoom_in 0.2s 0s both;
}
@keyframes zoom_in {
  0% {
    opacity: 0;
    transform: scale(0.9);
    -webkit-transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: none;
    -webkit-transform: none;
  }
}
@keyframes fadeUp {
  0% {
    opacity: 0;
    transform: translateY(10px);
    -webkit-transform: translateY(10px);
  }
  100% {
    opacity: 1;
    transform: none;
    -webkit-transform: none;
  }
}
@keyframes fadeUp {
  0% {
    opacity: 0;
    transform: translateY(10px);
    -webkit-transform: translateY(10px);
  }
  100% {
    opacity: 1;
    transform: none;
    -webkit-transform: none;
  }
}
@-webkit-keyframes fadeUp {
  0% {
    opacity: 0;
    transform: translateY(10px);
    -webkit-transform: translateY(10px);
  }
  100% {
    opacity: 1;
    transform: none;
    -webkit-transform: none;
  }
}
</style>
